<template>
	<view>
	<view class="fullscreen-container"  @click="handleClick">
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2beijing2.png'" mode="" class="fullscreen-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2biaoti2.png'" mode="" class="toubu-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2juese1.png'" mode="" class="baibian-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2fanhui.png'" mode="" class="fanhui" @click="fanhui"></image>
		<view class="duihuakuang">
			<p class="neir-ziti">李伯您好，我是慕名而来的游客，听说靖港历史悠久，您能给我讲讲这里的故事吗？</p>
		</view>
		<view class="cxkuang">
			<p class="cx">陈璇</p>
		</view>
	</view>
	</view>
</template>

<script>
	 import MusicContror from '../../../common/teding.vue'
	import { playBackgroundMusic, pauseBackgroundMusic, pageSpecificMusicManager, isGlobalMusicPlaying, isPageSpecificMusicPaused } from '../../../common/audio';
	export default {
		components: {
		   MusicContror,
		 },
		data(){
			return{
			 receivedParam: '', // 定义一个属性用于保存接收到的参数
			imageUrl: this.$imageUrl,	
			}
		},
		onLoad(options) {
		    // 在这里接收传递过来的参数
		    const passedParam1 = options.fromPage;
		    console.log('接收到的参数：', passedParam1);
		    if (passedParam1) {
		        this.receivedParam = passedParam1;
		    } else {
		        console.log('接收到的参数为空，未进行赋值。');
		    }
		},
		onShow() {
		    // 根据全局变量判断是否播放特定页面音乐
		    if (!isPageSpecificMusicPaused) {
		      pageSpecificMusicManager.playPageSpecificMusic();
		    }
		  },
		   onHide() {
		      // 暂停特定页面音乐并更新全局变量
		      pageSpecificMusicManager.pausePageSpecificMusic();
		      isPageSpecificMusicPaused = true;
		    },
	   methods: {
	     handleClick() {
		 const currentPageParam = this.receivedParam? this.receivedParam : '';
	       wx.redirectTo({
	        url: `/pagesNew/pages-exploration-discovery/Explore the wisdom of village construction/Page Three.?fromPage=${currentPageParam}`
	      });
	    },
	fanhui() {
		console.log('触发了')
		if (this.receivedParam) {
			console.log('特定跳转')
		    wx.redirectTo({
		        url: `/${this.receivedParam}`
		    });
		} else {
		console.log('默认跳转')
	      wx.redirectTo({
	        url: '/pagesNew/pages-exploration-discovery/index',
	      });
		}
		  pageSpecificMusicManager.pausePageSpecificMusic();
	      // 检查全局音乐是否在播放，如果没有则播放全局音乐
	      if (!isGlobalMusicPlaying) {
	        playBackgroundMusic();
	      }
	    },
	  }
	};
</script>

<style>
	.cx{
		font-size: 17px;
		background: -webkit-linear-gradient(#f7edc4, #ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
	}
	
	.fanhui{
			   width: 25px;
			    height: 25px;
			   position: absolute;
			   /* transform: rotate(90deg); */
			   /* border: 2px solid pink; */
			   top: 20px; /* 根据需要调整距离第一个图片顶部的距离 */
			   		   left: 20px; /* 根据需要调整距离第一个图片左侧的距离 */
	}
	
	.fullscreen-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fullscreen-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* transform: rotate(90deg) scale(2.2); */
	}

	.toubu-image {
			width: 16vw;
			height: 10vh;
		position: absolute;
		/* border: 2px solid blue; */
		/* transform: rotate(90deg) scale(2.2); */
		top: 0px;
		/* 根据需要调整距离第一个图片顶部的距离 */
		left: 42vw;
		/* 根据需要调整距离第一个图片左侧的距离 */
	}

	.baibian-image {
			width: 35vw;
			height: 100vh;
		position: absolute;
		/* transform: rotate(90deg); */
		top: 0px;
		/* 根据需要调整距离第一个图片顶部的距离 */
		left: 64.5vw;
	}

	.duihuakuang {
		width: 100vw;
		height: 30vh;
		position: absolute;
		/* border: 2px solid pink; */
		background-color: rgba(0, 0, 0, 0.4);
		top: 71vh;
		left: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 10px;
	}

	.neir-ziti {
		width: 1400rpx;
		height: 160rpx;
		/* border: 2px solid pink; */
		opacity: 0;
		position: relative;
		/* left: -100%; */
		top: 1px;
			margin-left: 22.5vw;
		animation: fadeInLeft 2s ease-in-out forwards;
		background: -webkit-linear-gradient(#f7edc4, #ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
		font-size: 17px;
		/* transform: rotate(90deg); */
	}

	@keyframes fadeInLeft {
				from {
					opacity: 0;
					top: 1px;
				}
		
				to {
					opacity: 1;
					top: -3px;
				}
			}

	.cxkuang {
		width: 80px;
		height: 25px;
		position: absolute;
		/* border: 2px solid pink; */
		background-color: rgba(0, 0, 0, 0.5);
			top: 64vh;
			left: 82vw;
		/* transform: rotate(90deg); */
		
		text-align: center;
		
	}
</style>